<template>
    <div>
        <p class="mt-2">Radio 单选框:</p>
        <el-row class="mb-1">
            <el-radio v-model="radioVal1" label="1">备选项1</el-radio>
            <el-radio v-model="radioVal1" label="2">备选项2</el-radio>
            <el-radio v-model="radioVal1" label="3">备选项3</el-radio>
        </el-row>
        <el-row class="mb-1">
            <el-radio v-model="radioVal1" label="1" disabled>备选项1</el-radio>
            <el-radio v-model="radioVal1" label="2" disabled>备选项2</el-radio>
            <el-radio v-model="radioVal1" label="3" disabled>备选项3</el-radio>
        </el-row>
        <el-row class="mb-1">
            <el-radio-group v-model="radioVal2">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
                <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
        </el-row>

        <p class="mt-2">Checkbox 多选框:</p>
        <el-row class="mb-1">
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked1">备选项</el-checkbox>
        </el-row>
        <el-row class="mb-1">
            <el-checkbox-group v-model="checkedList">
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
                <el-checkbox label="禁用" disabled></el-checkbox>
                <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group>
        </el-row>

        <div class="h-12"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef, toRefs } from "vue";

export default defineComponent({
    name: "CompName",
    setup() {
        const radioVal1 = ref<string>("1");
        const radioVal2 = ref<string>("1");

        const checked1 = ref<boolean>(true);
        let state = reactive({checkedList:["选中且禁用", "复选框 A"]});

        return {
            radioVal1,
            radioVal2,
            checked1,
            ...toRefs(state),
        };
    },
});
</script>

<style scoped></style>
